<div bsModal #createOrEditModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
    aria-labelledby="createOrEditModal" aria-hidden="true" [config]="{backdrop: 'static'}">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form *ngIf="active" #editForm="ngForm" novalidate (ngSubmit)="save()" autocomplete="off">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span *ngIf="schedule.id">编辑日历</span>
                        <span *ngIf="!schedule.id">创建新的日历</span>
                    </h4>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="control-label">工作日:</label>
                        <div class="m-checkbox-inline">
                            <label class="m-checkbox m-checkbox--bold m-checkbox--state-success">
                                <input type="checkbox" name="workDay1" [(ngModel)]="workDays[0]"> 一
                                <span></span>
                            </label>
                            <label class="m-checkbox m-checkbox--bold m-checkbox--state-success">
                                <input type="checkbox" name="workDay2" [(ngModel)]="workDays[1]"> 二
                                <span></span>
                            </label>
                            <label class="m-checkbox m-checkbox--bold m-checkbox--state-success">
                                <input type="checkbox" name="workDay3" [(ngModel)]="workDays[2]"> 三
                                <span></span>
                            </label>
                            <label class="m-checkbox m-checkbox--bold m-checkbox--state-success">
                                <input type="checkbox" name="workDay4" [(ngModel)]="workDays[3]"> 四
                                <span></span>
                            </label>
                            <label class="m-checkbox m-checkbox--bold m-checkbox--state-success">
                                <input type="checkbox" name="workDay5" [(ngModel)]="workDays[4]"> 五
                                <span></span>
                            </label>
                            <label class="m-checkbox m-checkbox--bold m-checkbox--state-success">
                                <input type="checkbox" name="workDay6" [(ngModel)]="workDays[5]"> 六
                                <span></span>
                            </label>
                            <label class="m-checkbox m-checkbox--bold m-checkbox--state-success">
                                <input type="checkbox" name="workDay7" [(ngModel)]="workDays[6]"> 日
                                <span></span>
                            </label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label style="display: block;">早班 *</label>
                        <p-calendar name="zaoBanStart" [(ngModel)]="zaoBanStartDate" [timeOnly]="'true'" hourFormat="24"
                            [inputStyleClass]="'form-control'"
                            [inputStyle]="{'width':'360px','height':'40px', 'padding-left':'20px'}" required>
                        </p-calendar>

                        ---
                        <p-calendar name="zaoBanEnd" [(ngModel)]="zaoBanEndDate" [timeOnly]="'true'" hourFormat="24"
                            [inputStyleClass]="'form-control'"
                            [inputStyle]="{'width':'360px','height':'40px', 'padding-left':'20px'}" required>
                        </p-calendar>
                    </div>

                    <div class="form-group">
                        <label style="display: block;">午班 *</label>
                        <p-calendar name="zhongBanStart" [(ngModel)]="zhongBanStartDate" [timeOnly]="'true'"
                            hourFormat="24" [inputStyleClass]="'form-control'"
                            [inputStyle]="{'width':'360px','height':'40px', 'padding-left':'20px'}" required>
                        </p-calendar>
                        ---
                        <p-calendar name="zhongBanEnd" [(ngModel)]="zhongBanEndDate" [timeOnly]="'true'"
                            [inputStyleClass]="'form-control'" hourFormat="24"
                            [inputStyle]="{'width':'360px','height':'40px', 'padding-left':'20px'}" required>
                        </p-calendar>
                    </div>

                    <div class="form-group">
                        <label style="display: block;">晚班 *</label>
                        <p-calendar name="wanBanStart" [(ngModel)]="wanBanStartDate" [timeOnly]="'true'"
                            [inputStyleClass]="'form-control'" hourFormat="24"
                            [inputStyle]="{'width':'360px','height':'40px', 'padding-left':'20px'}" required>
                        </p-calendar>
                        ---
                        <p-calendar name="wanBanEnd" [(ngModel)]="wanBanEndDate" [timeOnly]="'true'"
                            [inputStyleClass]="'form-control'" [minDate]="wanBanStartDate" hourFormat="24"
                            [inputStyle]="{'width':'360px','height':'40px', 'padding-left':'20px'}" required>
                        </p-calendar>
                    </div>

                    <div class="form-group">
                        <label style="display: block;">时间区间 *</label>
                        <p-calendar [(ngModel)]="validTimeStart" name="validTimeStart" dateFormat="yy年m月d日"
                            [utc]="'true'" [inputStyle]="{'width':'360px','height':'40px', 'padding-left':'20px'}"
                            [inputStyleClass]="'form-control'" [locale]="es" required></p-calendar>
                        ---
                        <p-calendar [(ngModel)]="validTimeEnd" [minDate]="validTimeStart" name="validTimeEnd"
                            dateFormat="yy年m月d日" [utc]="'true'" [inputStyleClass]="'form-control'" [locale]="es"
                            [inputStyle]="{'width':'360px','height':'40px', 'padding-left':'20px'}" required>
                        </p-calendar>
                    </div>

                    <div class="form-group">
                        <label for="priority">优先级</label>
                        <input id="priority" type="number" name="priority" class="form-control"
                            [(ngModel)]="schedule.priority">
                    </div>

                    <div class="form-group">
                        <label for="remark">备注</label>
                        <textarea id="remark" class="form-control" type="text" name="remark"
                            [(ngModel)]="schedule.remark" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button [disabled]="saving" type="button" class="btn btn-default"
                        (click)="close()">{{l("Cancel")}}</button>
                    <button type="submit" class="btn btn-primary" [disabled]="!editForm.form.valid"
                        [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')"><i class="fa fa-save"></i>
                        <span>{{l("Save")}}</span></button>
                </div>
            </form>
        </div>
    </div>
</div>
